/**
 * 在土地里面添加一条新的记录
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Modal, Input, Card, Form, InputNumber, DatePicker, Row, Col } from 'antd';
import { messErr } from '@/utils/message';

import styles from './AddNewRecord.less';

@Form.create()
class AddNewField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  open = (next = () => {}) => {
    this.setState({ visible: true }, next);
  };

  close = (next = () => {}) => {
    this.setState({
      visible: false,
    }, next);
  };

  handleOk = () => {
    const that = this;
    const {
      handleSubmit,
      form: {
        validateFieldsAndScroll,
        resetFields,
      },
    } = this.props;
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        that.close(() => {
          handleSubmit(values);
          resetFields();
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };

    return (
      <Modal
        title="新增记录"
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={() => this.close()}
      >
        <Card bordered={false} className={styles.container}>
          <Row className={styles.row}>
            <Col xs={7} className={styles.leftTitle}>
              苗床整地
            </Col>
            <Col xs={17}>
              <Form.Item {...formItemLayout} label="时间">
                {getFieldDecorator('miaochuangzhengdi_time')(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="费用">
                {getFieldDecorator('miaochuangzhengdi_cost')(
                  <InputNumber style={{ width: '100%' }} maxLength={8} />
                )}
              </Form.Item>
            </Col>
          </Row>

          <Row className={styles.row}>
            <Col xs={7} className={styles.leftTitle}>
              施肥
            </Col>
            <Col xs={17}>
              <Form.Item {...formItemLayout} label="时间">
                {getFieldDecorator('shifei_time')(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="费用">
                {getFieldDecorator('shifei_cost')(
                  <InputNumber style={{ width: '100%' }} maxLength={8} />
                )}
              </Form.Item>
            </Col>
          </Row>

          <Row className={styles.row}>
            <Col xs={7} className={styles.leftTitle}>
              播种
            </Col>
            <Col xs={17}>
              <Form.Item {...formItemLayout} label="时间">
                {getFieldDecorator('bozhong_time')(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="费用">
                {getFieldDecorator('bozhong_cost')(
                  <InputNumber style={{ width: '100%' }} maxLength={8} />
                )}
              </Form.Item>
            </Col>
          </Row>

          <Row className={styles.row}>
            <Col xs={7} className={styles.leftTitle}>
              病虫防治
            </Col>
            <Col xs={17}>
              <Form.Item {...formItemLayout} label="时间">
                {getFieldDecorator('bingchongfangzhi_time')(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="费用">
                {getFieldDecorator('bingchongfangzhi_cost')(
                  <InputNumber style={{ width: '100%' }} maxLength={8} />
                )}
              </Form.Item>
            </Col>
          </Row>

          <Row className={styles.row}>
            <Col xs={7} className={styles.leftTitle}>
              收割
            </Col>
            <Col xs={17}>
              <Form.Item {...formItemLayout} label="时间">
                {getFieldDecorator('shouge_time')(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="费用">
                {getFieldDecorator('shouge_cost')(
                  <InputNumber style={{ width: '100%' }} maxLength={8} />
                )}
              </Form.Item>
            </Col>
          </Row>

          <Row className={styles.row}>
            <Col xs={7} className={classnames(styles.leftTitle, styles.last)}>
              其他
            </Col>
            <Col xs={17}>
              <Form.Item {...formItemLayout} label="名称">
                {getFieldDecorator('other_name')(
                  <Input style={{ width: '100%' }} maxLength={20} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="时间">
                {getFieldDecorator('other_time')(
                  <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
                )}
              </Form.Item>
              <Form.Item {...formItemLayout} label="费用">
                {getFieldDecorator('other_cost')(
                  <InputNumber style={{ width: '100%' }} maxLength={8} />
                )}
              </Form.Item>
            </Col>
          </Row>

        </Card>
      </Modal>
    );
  }
}

AddNewField.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
};

AddNewField.defaultProps = {

};

export default AddNewField;
